<template>
  <div :class="[!showDiscountFlag&&!showTurn&&!showRelData&&!popGiftModal&&showVipEnter || !isShowStyle || $isWxAppIos() ?'':'c-bd-t12-f5', circleStyle && showDiscountFlag?'c-pv20 c-bd-t1':'']" v-if="(showDiscountFlag||showTurn||showVipEnter||showRelData||showCashBack||hasGiftRelates||hasRelatesDatum) && !isNew && styleType == 1">
    <!-- 非分销 && 单卖 && 专栏内不免费 && 无权限 && 非营销活动 && 价格>0 && （积分抵扣 || vip优惠 || svip优惠） -->
    <div v-if="!$isWxAppIos() && (showDiscountFlag || showCashBack)" :class="[isShowStyle ? 'c-ph24':'', ckFrom == cfrom.shopping? 'c-pt18 c-pb10' : 'c-pt24 c-pb4']" class="c-flex-row c-aligni-start c-fs20 c-lh c-fc-xblack">
      <div class="c-fs24 c-mr24"  :class="ckFrom == cfrom.shopping ? 'c-fc-gray c-pv16' : 'c-fc-xblack c-fw600 c-mt6'">优惠</div>
      <!-- 限时购不展示积分抵扣 -->
      <div class="c-flex-grow1 ">
        <template v-if="!optimal">
          <div @click="clickShowCoupon" v-if="couponPermission&&couponList && couponList.length > 0 && cashBack && cashBack.length == 0" class="c-flex-row c-aligni-center c-pb20">
            <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ww48 c-hh24 c-flex-row c-flex-center c-mr20">领券</div>
            <div class="c-p c-mr20 c-text-hidden" v-for="(item,index) in list" :key="index">
              <div :class="theme == 'mb7_black' ? 'c-fc-g c-bd1-g' : 'theme-fc theme-bd1'" class="c-fs20 c-hh36 c-ph14 c-flex-row c-flex-center c-lh c-br6 c-text-hidden">
                {{showCouponText(item)}}
                <div :class="theme == 'mb7_black' ? 'c-bd1-g' : 'theme-bd1'" class="c-hh16 c-ww16 c-br16 c-pa c-p-t12 pl-8 c-bg-white"></div>
                <div :class="theme == 'mb7_black' ? 'c-bd1-g' : 'theme-bd1'" class="c-hh16 c-ww16 c-br16 c-pa c-p-t12 pr-8 c-bg-white"></div>
              </div>
            </div>
            <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end">
              <span class="iconfont c-fs24 c-fc-gray">&#xe635;</span>
            </div>
          </div>
          <div class="c-flex-row c-aligni-center c-pb20"
            v-if="(
              (vipDiscountType == 2 && ((vipDiscountPrice < originPrice && vipDiscountPrice != 0) || (svipDiscountPrice < originPrice && svipDiscountPrice != 0))) ||
              (vipDiscountType == 1 && ((vipDiscount != 100 && vipDiscount != 0) || (svipDiscount != 100 && svipDiscount != 0)))) &&
              cashBack && cashBack.length == 0 && !sales && !isChain"
          >
            <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ww48 c-lh c-flex-row c-flex-center c-mr20">会员</div>
            <div class="c-fs22 c-fc-xblack">
              <span class="c-mr16" v-if="vipDiscountType == 1 && vipDiscount != 100 && vipDiscount != 0">VIP价:{{vipDiscount == 0 ? "免费" : Number(originPrice * vipDiscount / 100).toFixed(2) + "元"}}</span>
              <span class="c-mr16" v-if="vipDiscountType == 2 && vipDiscountPrice < originPrice && vipDiscountPrice != 0">VIP价:{{vipDiscountPrice == 0 ? "免费" : Number(vipDiscountPrice).toFixed(2) + "元"}}</span>
              <span v-if="vipDiscountType == 1 && svipDiscount != 100 && svipDiscount != 0">SVIP价:{{svipDiscount == 0 ? "免费" : Number(originPrice * svipDiscount / 100).toFixed(2) + "元"}}</span>
              <span v-if="vipDiscountType == 2 && svipDiscountPrice < originPrice && svipDiscountPrice != 0">SVIP价:{{svipDiscountPrice == 0 ? "免费" : Number(svipDiscountPrice).toFixed(2) + "元"}}</span>
            </div>
          </div>
          <div class="c-flex-row c-aligni-center c-pb20"
            v-if="isChain && chainIdName && ((chainOrderBonus > 0 && chainOrderBonus < Number(originPrice)) || (reOrderBonus > 0 && reOrderBonus < Number(originPrice)))"
          >
            <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ph8 c-lh c-flex-row c-flex-center c-mr20">{{chainIdName}}</div>
            <div class="c-fs22 c-fc-xblack">
              <span v-if="chainOrderBonus > 0 && chainOrderBonus < Number(originPrice)" class="c-mr16">优惠价：{{Number(chainOrderBonus).toFixed(2) + "元"}}</span>
              <span v-if="reOrderBonus > 0 && reOrderBonus < Number(originPrice)">复购价：{{Number(reOrderBonus).toFixed(2) + "元"}}</span>
            </div>
          </div>
          <div v-if="companyAuth.enablePoints == 1 && deductiblePoints > 0 && cashBack && cashBack.length == 0 && !sales" class="c-flex-row c-aligni-center c-pb20">
            <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-lh c-ph8 c-flex-row c-flex-center c-mr20">{{customPointName}}</div>
            <div class="c-fs22 c-fc-xblack">{{companyAuth.integrateName1}}可抵 {{'￥' | iosPriceFilter}}{{deductiblePoints}}</div>
          </div>
        </template>
        <template v-else-if="optimal">
          <div @click="clickShowCoupon" v-if="showCoupon" class="c-flex-row c-aligni-center c-pb20">
            <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ww48 c-lh c-flex-row c-flex-center c-mr20">领券</div>
            <div class="c-p c-mr20 c-text-hidden" v-for="(item,index) in list" :key="index">
              <div :class="theme == 'mb7_black' ? 'c-fc-g c-bd1-g' : 'theme-fc theme-bd1'" class="c-fs20 c-hh36 c-ph14 c-flex-row c-flex-center c-lh c-br6 c-text-hidden">
                {{showCouponText(item)}}
                <div :class="theme == 'mb7_black' ? 'c-bd1-g' : 'theme-bd1'" class="c-hh16 c-ww16 c-br16 c-pa c-p-t12 pl-8 c-bg-white"></div>
                <div :class="theme == 'mb7_black' ? 'c-bd1-g' : 'theme-bd1'" class="c-hh16 c-ww16 c-br16 c-pa c-p-t12 pr-8 c-bg-white"></div>
              </div>
            </div>
            <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end">
              <span class="iconfont c-fs24 c-fc-gray">&#xe635;</span>
            </div>
          </div>
          <div class="c-flex-row c-aligni-center c-pb20" v-if="showDiscountInfo">
            <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ww48 c-lh c-flex-row c-flex-center c-mr20">会员</div>
            <div class="c-fs22 c-fc-xblack">
              {{idName}}<span>
                <span v-if="vipDiscountType == 1 && idDiscount != 100 && idDiscount != 0">享{{Number(idDiscount / 10).toFixed(2)}}折</span>
                <span v-else-if="vipDiscountType == 2 && idPrice > 0 && idPrice != originPrice">减{{'￥' | iosPriceFilter}}{{Number(originPrice - idPrice).toFixed(2)}}元</span>
                <span v-else-if="idDiscount == 0 || idPrice == 0">免费</span>
              </span>
            </div>
          </div>
          <div class="c-flex-row c-aligni-center" :class="showPoints ? 'c-pb20' : ''"
            v-if="showChain"
          >
            <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ph8 c-lh c-flex-row c-flex-center c-mr20">{{chainIdName}}</div>
            <div class="c-fs22 c-fc-xblack">
              <span v-if="reOrderBonus > 0 && reOrderBonus < Number(originPrice)">复购价：{{Number(reOrderBonus).toFixed(2) + "元"}}</span>
              <span v-else-if="chainOrderBonus > 0 && chainOrderBonus < Number(originPrice)" class="c-mr16">优惠价：{{Number(chainOrderBonus).toFixed(2) + "元"}}</span>
            </div>
          </div>
          <div v-if="showPoints" class="c-flex-row c-aligni-center c-pb20">
            <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-lh c-ph8 c-flex-row c-flex-center c-mr20">{{customPointName}}</div>
            <div class="c-fs22 c-fc-xblack">{{companyAuth.integrateName1}}可抵 {{'￥' | iosPriceFilter}}{{deductiblePoints}}</div>
          </div>
        </template>
        <div v-if="showCashBack" @click="clickCashBack">
          <div class="c-pv16 c-flex-row c-aligni-start" v-if="!(cashBack.every(item => {return item.isDiscount == -1}))">
            <div class="c-br4 c-inlineblack c-fs16 c-lh20 c-textAlign-c c-ph4 c-pv2" :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'">满减</div>
            <div class="c-w0 c-flex-grow1 c-flex-row c-aligni-center c-justify-sb">
              <div class="c-ml20 c-maxw440 c-text-ellipsis1 c-lh24 c-fc-xblack c-fs24">{{getCashBackTxt}}</div>
              <span class="iconfont c-fs24 c-fc-gray c-hh24 c-lh24">&#xe635;</span>
            </div>
          </div>
          <div class="c-flex-row c-aligni-start c-pv16" v-if="cashBack.filter(item => {return item.isSendPoints == 1 || item.isSendDiscount == 1 || item.isSendProd == 1}).length > 0" @click="clickCashBack">
            <div class="c-br4 c-inlineblack c-fs16 c-lh20 c-textAlign-c c-ph4 c-pv2" :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'">满赠</div>
            <div class="c-flex-row c-flexw-wrap c-aligni-start c-justify-sb c-w0 c-flex-grow1">
              <div class="c-h c-w0 c-flex-grow1 c-ml20 c-maxw428 c-text-ellipsis1 c-fs24">
                <span v-for="(item, index) in cashBack.filter(item => {return item.isSendPoints == 1 || item.isSendDiscount == 1 || item.isSendProd == 1})" :key="index" class="c-lh24 c-fc-xblack">
                  {{item.detail ? item.detail.title : ''}},
                  <span v-for="(it, i) in item.sendProdList" :key="i">
                    送{{it.number}}件<span class="c-ml10 c-mr10 theme-fc" @click.stop="goShopDetail(it.prodId)">{{it.prodName}}</span>{{i == (item.sendProdList.length - 1) ? '' : '、'}}
                  </span>{{getCashBackPresent(item)}}；
                </span>
              </div>
              <span class="iconfont c-fs24 c-fc-gray c-hh24 c-lh24">&#xe635;</span>
            </div>
          </div>
          <div class="c-pv12 c-flex-row c-aligni-center" v-if="cashBack.filter(item => {return item.isFreeShipping == 1}).length > 0">
            <span class="c-br4 c-inlineblack c-fs16 c-lh20 c-textAlign-c c-ph4 c-pv2" :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'">包邮</span>
            <div class="c-w0 c-flex-grow1 c-flex-row c-aligni-center c-justify-sb">
              <div class="c-ml20 c-maxw440 c-text-ellipsis1 c-lh24 c-fc-xblack c-fs24">{{getFreeShipping}}</div>
              <span class="iconfont c-fs24 c-fc-gray c-hh24 c-lh24">&#xe635;</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品关联售卖虚拟商品 -->
    <div class="c-ph24 c-pv24 c-flex-row c-fs20 c-fc-xblack c-aligni-center" @click="clickShowRelData" v-if="!$isWxAppIos() && showRelData">
      <div class="c-fs24 c-mr24 c-fc-gray">套餐</div>
      <div class="c-flex-grow1" :class="(showDiscountFlag || showCashBack) ? 'c-bd-t1' : ''">
        <div class="c-flex-row c-aligni-center c-bg-white c-justify-sb">
          <span class="c-br4 c-fs20  c-mr20 c-hh32 c-ww58 c-flex-row c-aligni-center c-justify-center" :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'">赠品</span>
          <div class="c-text-ellipsis1 c-fs24 c-fc-xblack">内含{{relDataNumText}}</div>
          <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end">
            <span class="iconfont c-fs24 c-fc-gray">&#xe635;</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 购买礼包 -->
    <div v-if="!$isWxAppIos() && hasGiftRelates" class="c-ph24 c-pv24 c-flex-row c-fs20 c-fc-xblack c-aligni-center" @click="popGiftModal" :class="(showDiscountFlag || showCashBack || showRelData) ? 'c-bd-t1' : ''">
      <div class="c-fs22 c-mr24 c-fc-xblack">赠品</div>
      <div class="c-flex-grow1">
        <div class="c-flex-row c-aligni-center c-bg-white c-justify-sb">
          <span class="c-br4 c-inlineblack c-fs16 c-textAlign-c c-mr26 c-ph4 c-pv2" :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'">礼包</span>
          <div class="c-text-ellipsis1 c-fs22 c-fc-xblack"> 内含{{giftRelatesCount}}个商品</div>
          <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end">
            <span class="iconfont c-fs24 c-fc-gray">&#xe635;</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 大转盘活动 -->
    <div @click="goTOturn" v-if="!$isWxAppIos() && showTurn" class="c-ph24 c-pv4 c-flex-row c-bd-t1 c-fs20 c-lh c-fc-xblack c-aligni-center">
      <div class="c-fs22 c-mr24 c-fc-xblack c-pv16">活动</div>
      <div class="c-flex-row c-flex-grow1  c-justify-sb">
        <div class="c-flex-grow1">
          购后参与「<span>{{turnName}}</span>」大转盘抽奖
        </div>
        <i class="iconfont c-fs16">&#xe635;</i>
      </div>
    </div>
    <!-- 开通vip、svip免费学习 -->
    <div v-if="showVipEnter" class="c-ph24">
      <vip-entry
        class="c-pb24"
        :vipDiscount="vipDiscount"
        :svipDiscount="svipDiscount"
        :originPrice="originPrice"
        :vipDiscountPrice="vipDiscountPrice"
        :svipDiscountPrice="svipDiscountPrice"
        :eduflag='eduflag'
        :ckFromText="ckFromText"
        :vipDiscountType="vipDiscountType"
        :dataInfo="dataInfo"
      ></vip-entry>
    </div>
  </div>
  <div v-else-if="styleType == 1 && isNew && (showDiscountFlag||showTurn||showIntegrate||showVipEnter||hasCollocation||hasCircle||hasGiftRelates||hasRelatesDatum)">
    <!-- 详情页样式一 -->
    <div v-if="showVipEnter" class="c-ph24">
      <vip-entry
        class="c-pb24"
        :vipDiscount="vipDiscount"
        :svipDiscount="svipDiscount"
        :originPrice="originPrice"
        :vipDiscountPrice="vipDiscountPrice"
        :svipDiscountPrice="svipDiscountPrice"
        :eduflag='eduflag'
        :isNew="true"
        :vipDiscountType="vipDiscountType"
        :dataInfo="dataInfo"
      ></vip-entry>
    </div>
    <div v-if="showDiscountFlag || showTurn || showIntegrate || hasCollocation || hasCircle || hasGiftRelates || hasRelatesDatum" :class="[!$isWxAppIos() && showDiscountFlag ? 'c-pt24' : '', theme, $isWxApp() ? 'c-ph24' : '' , $isWxAppIos() && !hasCircle ? '' : 'c-bd-t12-f5 c-ph24']" class="">
      <div v-if="!$isWxAppIos() && showDiscountFlag" class="c-flex-row c-aligni-start">
        <div class="c-fc-xblack c-mr24 c-mt4" :class="circleStyle ? 'c-fs26 borderL c-p c-pl12':'c-fs22 c-fw-b'">优惠</div>
        <div :class="showTurn || showIntegrate || hasCollocation || hasCircle || hasGiftRelates || hasRelatesDatum ? 'c-bd-b1 ' : ''" class="c-w0 c-flex-grow1">
          <template v-if="!optimal">
            <div @click="clickShowCoupon" v-if="couponPermission&&couponList && couponList.length > 0 && cashBack && cashBack.length == 0" class="c-flex-row c-aligni-center c-pb20">
              <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ww48 c-lh c-flex-row c-flex-center c-mr20">领券</div>
              <div class="c-p c-mr20 c-text-hidden" v-for="(item,index) in list" :key="index">
                <div :class="theme == 'mb7_black' ? 'c-fc-g c-bd1-g' : 'theme-fc theme-bd1'" class="c-fs20 c-hh36 c-ph14 c-flex-row c-flex-center c-lh c-br6 c-text-hidden">
                  {{showCouponText(item)}}
                  <div :class="theme == 'mb7_black' ? 'c-bd1-g' : 'theme-bd1'" class="c-hh16 c-ww16 c-br16 c-pa c-p-t12 pl-8 c-bg-white"></div>
                  <div :class="theme == 'mb7_black' ? 'c-bd1-g' : 'theme-bd1'" class="c-hh16 c-ww16 c-br16 c-pa c-p-t12 pr-8 c-bg-white"></div>
                </div>
              </div>
              <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end">
                <span class="iconfont c-fs24 c-fc-gray">&#xe635;</span>
              </div>
            </div>
            <div class="c-flex-row c-aligni-center c-pb20"
              v-if="(
                (vipDiscountType == 2 && ((vipDiscountPrice < originPrice && vipDiscountPrice != 0) || (svipDiscountPrice < originPrice && svipDiscountPrice != 0))) ||
                (vipDiscountType == 1 && ((vipDiscount != 100 && vipDiscount != 0) || (svipDiscount != 100 && svipDiscount != 0)))) &&
                cashBack && cashBack.length == 0 && !sales && !isChain"
            >
              <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ww48 c-lh c-flex-row c-flex-center c-mr20">会员</div>
              <div class="c-fs22 c-fc-xblack">
                <span class="c-mr16" v-if="vipDiscountType == 1 && vipDiscount != 100 && vipDiscount != 0">VIP价:{{vipDiscount == 0 ? "免费" : Number(originPrice * vipDiscount / 100).toFixed(2) + "元"}}</span>
                <span class="c-mr16" v-if="vipDiscountType == 2 && vipDiscountPrice < originPrice && vipDiscountPrice != 0">VIP价:{{vipDiscountPrice == 0 ? "免费" : Number(vipDiscountPrice).toFixed(2) + "元"}}</span>
                <span v-if="vipDiscountType == 1 && svipDiscount != 100 && svipDiscount != 0">SVIP价:{{svipDiscount == 0 ? "免费" : Number(originPrice * svipDiscount / 100).toFixed(2) + "元"}}</span>
                <span v-if="vipDiscountType == 2 && svipDiscountPrice < originPrice && svipDiscountPrice != 0">SVIP价:{{svipDiscountPrice == 0 ? "免费" : Number(svipDiscountPrice).toFixed(2) + "元"}}</span>
              </div>
            </div>
            <div class="c-flex-row c-aligni-center c-pb20"
              v-if="isChain && chainIdName && ((chainOrderBonus > 0 && chainOrderBonus < Number(originPrice)) || (reOrderBonus > 0 && reOrderBonus < Number(originPrice)))"
            >
              <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ph8 c-lh c-flex-row c-flex-center c-mr20">{{chainIdName}}</div>
              <div class="c-fs22 c-fc-xblack">
                <span v-if="chainOrderBonus > 0 && chainOrderBonus < Number(originPrice)" class="c-mr16">优惠价：{{Number(chainOrderBonus).toFixed(2) + "元"}}</span>
                <span v-if="reOrderBonus > 0 && reOrderBonus < Number(originPrice)">复购价：{{Number(reOrderBonus).toFixed(2) + "元"}}</span>
              </div>
            </div>
            <div v-if="companyAuth.enablePoints == 1 && deductiblePoints > 0 && cashBack && cashBack.length == 0 && !sales" class="c-flex-row c-aligni-center c-pb20">
              <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-lh c-ph8 c-flex-row c-flex-center c-mr20">{{customPointName}}</div>
              <div class="c-fs22 c-fc-xblack">{{companyAuth.integrateName1}}可抵 {{'￥' | iosPriceFilter}}{{deductiblePoints}}</div>
            </div>
          </template>
          <template v-else-if="optimal">
            <div @click="clickShowCoupon" v-if="showCoupon" class="c-flex-row c-aligni-center c-pb20">
              <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ww48 c-lh c-flex-row c-flex-center c-mr20">领券</div>
              <div class="c-p c-mr20 c-text-hidden" v-for="(item,index) in list" :key="index">
                <div :class="theme == 'mb7_black' ? 'c-fc-g c-bd1-g' : 'theme-fc theme-bd1'" class="c-fs20 c-hh36 c-ph14 c-flex-row c-flex-center c-lh c-br6 c-text-hidden">
                  {{showCouponText(item)}}
                  <div :class="theme == 'mb7_black' ? 'c-bd1-g' : 'theme-bd1'" class="c-hh16 c-ww16 c-br16 c-pa c-p-t12 pl-8 c-bg-white"></div>
                  <div :class="theme == 'mb7_black' ? 'c-bd1-g' : 'theme-bd1'" class="c-hh16 c-ww16 c-br16 c-pa c-p-t12 pr-8 c-bg-white"></div>
                </div>
              </div>
              <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end">
                <span class="iconfont c-fs24 c-fc-gray">&#xe635;</span>
              </div>
            </div>
            <div class="c-flex-row c-aligni-center c-pb20" v-if="showDiscountInfo">
              <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ww48 c-lh c-flex-row c-flex-center c-mr20">会员</div>
              <div class="c-fs22 c-fc-xblack">
                {{idName}}<span>
                  <span v-if="vipDiscountType == 1 && idDiscount != 100 && idDiscount != 0">享{{Number(idDiscount / 10).toFixed(2)}}折</span>
                  <span v-else-if="vipDiscountType == 2 && idPrice > 0 && idPrice != originPrice">减{{'￥' | iosPriceFilter}}{{Number(originPrice - idPrice).toFixed(2)}}元</span>
                  <span v-else-if="idDiscount == 0 || idPrice == 0">免费</span>
                </span>
              </div>
            </div>
            <div class="c-flex-row c-aligni-center" :class="showPoints ? 'c-pb20' : ''"
              v-if="showChain"
            >
              <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ph8 c-lh c-flex-row c-flex-center c-mr20">{{chainIdName}}</div>
              <div class="c-fs22 c-fc-xblack">
                <span v-if="reOrderBonus > 0 && reOrderBonus < Number(originPrice)">复购价：{{Number(reOrderBonus).toFixed(2) + "元"}}</span>
                <span v-else-if="chainOrderBonus > 0 && chainOrderBonus < Number(originPrice)" class="c-mr16">优惠价：{{Number(chainOrderBonus).toFixed(2) + "元"}}</span>
              </div>
            </div>
            <div v-if="showPoints" class="c-flex-row c-aligni-center c-pb20">
              <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-lh c-ph8 c-flex-row c-flex-center c-mr20">{{customPointName}}</div>
              <div class="c-fs22 c-fc-xblack">{{companyAuth.integrateName1}}可抵 {{'￥' | iosPriceFilter}}{{deductiblePoints}}</div>
            </div>
          </template>
        </div>
      </div>
      <div class="c-flex-row c-aligni-start" v-if="showTurn || showIntegrate">
        <div class="c-fc-xblack c-fs22 c-fw-b c-mr24 c-pt20">活动</div>
        <div :class="hasCollocation || hasCircle || hasGiftRelates || hasRelatesDatum ? 'c-bd-b1 ' : ''" class="c-w0 c-flex-grow1">
          <div class="c-flex-row c-aligni-center c-pv20" v-if="!$isWxAppIos() && showTurn" @click="goTOturn">
            <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ww48 c-lh c-flex-row c-flex-center c-mr20">抽奖</div>
            <div class="c-fs22 c-fc-xblack">购买后参与「<span>{{turnName}}</span>」大转盘抽奖</div>
            <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end">
              <span class="iconfont c-fs24 c-fc-gray">&#xe635;</span>
            </div>
          </div>
          <div class="c-flex-row c-aligni-center c-pv20" v-if="showIntegrate" @click="getIntegration">
            <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ph8 c-lh c-flex-row c-flex-center c-mr20">{{customPointName}}</div>
            <div class="c-fs22 c-fc-xblack c-flex-grow1">您还有{{companyAuth.integrateName1}}未领取</div>
            <div :class="theme == 'mb7_black' ? 'c-fc-g' : 'theme-fc'" class="c-ws-n c-fs22">领取{{companyAuth.integrateName1}}</div>
          </div>
        </div>
      </div>
      <div class="c-flex-row c-aligni-start" v-if="hasCollocation">
        <div class="c-fc-xblack c-fs22 c-fw-b c-mr24 c-pt20">配套</div>
        <div :class="hasCircle || hasGiftRelates || hasRelatesDatum ? 'c-bd-b1 ' : ''" class="c-w0 c-flex-grow1">
          <div class="c-flex-row c-aligni-center c-pv20" @click="popRelateCourse">
            <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ww48 c-lh c-flex-row c-flex-center c-mr20">搭配</div>
            <div class="c-fs22 c-fc-xblack">该课程有搭配学习内容</div>
            <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end">
              <span class="iconfont c-fs24 c-fc-gray">&#xe635;</span>
            </div>
          </div>
        </div>
      </div>
      <div class="c-flex-row c-aligni-start" v-if="hasCircle">
        <div class="c-fc-xblack c-fs22 c-fw-b c-mr24 c-pt20">圈子</div>
        <div :class="hasGiftRelates || hasRelatesDatum ? 'c-bd-b1 ' : ''" class="c-w0 c-flex-grow1">
          <div class="c-flex-row c-aligni-center c-pv20" @click="joinCircle">
            <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ww48 c-lh c-flex-row c-flex-center c-mr20">交流</div>
            <div class="c-fs22 c-fc-xblack">立即加入参与讨论</div>
            <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end">
              <span class="c-fs22" :class="theme == 'mb7_black' ? 'c-fc-g' : 'theme-fc'">进入圈子</span>
            </div>
          </div>
        </div>
      </div>
      <div class="c-flex-row c-aligni-start" v-if="hasGiftRelates">
        <div class="c-fc-xblack c-fs22 c-fw-b c-mr24 c-pt18">赠品</div>
        <div :class="hasRelatesDatum ? 'c-bd-b1 ' : ''" class="c-w0 c-flex-grow1">
          <div class="c-flex-row c-aligni-center c-pv20" @click="popGiftModal">
            <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ww48 c-lh c-flex-row c-flex-center c-mr20">礼包</div>
            <div class="c-maxw440 c-text-ellipsis1 c-lh24 c-fc-xblack c-fs22">内含{{giftRelatesCount}}个商品</div>
            <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end">
              <span class="iconfont c-fs24 c-fc-gray">&#xe635;</span>
            </div>
          </div>
        </div>
      </div>
      <div class="c-flex-row c-aligni-start" v-if="hasRelatesDatum">
        <div class="c-fc-xblack c-fs22 c-fw-b c-mr24 c-pt20 c-mt4">课件</div>
        <div class="c-w0 c-flex-grow1">
          <div class="c-flex-row c-aligni-center c-pv20" @click="popRelatesDatum">
            <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ww48 c-lh c-flex-row c-flex-center c-mr20">资料</div>
            <div class="c-fs22 c-fc-xblack">课程资料下载</div>
            <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end">
              <span class="iconfont c-fs24 c-fc-gray">&#xe635;</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-else-if="styleType == 2">
    <!-- 无折扣、优惠券、积分、链动展示信息 -->
    <div class="c-flex-row c-aligni-center" v-if="showTurn || showIntegrate">
      <div class="c-fc-xblack c-fs24 c-fw-b c-ww88">活动</div>
      <div class="c-w0 c-flex-grow1 c-bd-b1-f5">
        <div class="c-flex-row c-aligni-center c-pv30" v-if="!$isWxAppIos() && showTurn" @click="goTOturn">
          <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br16 c-textAlign-c c-fs20 c-hh28 c-ww88 c-lh c-flex-row c-flex-center c-mr20">抽奖</div>
          <div class="c-fs24 c-fc-xblack">购买后参与「<span>{{turnName}}</span>」大转盘抽奖</div>
          <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end">
            <span class="iconfont c-fs20 c-fc-gray">&#xe60e;</span>
          </div>
        </div>
        <div class="c-flex-row c-aligni-center c-pv30" v-if="showIntegrate" @click="getIntegration">
          <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br16 c-textAlign-c c-fs20 c-hh28 c-ph8 c-lh c-flex-row c-flex-center c-mr10">{{customPointName}}</div>
          <div class="c-fs24 c-fc-xblack c-flex-grow1">您还有{{companyAuth.integrateName1}}未领取</div>
          <div :class="theme == 'mb7_black' ? 'c-fc-g' : 'theme-fc'" class="c-ws-n c-fs24">领取{{companyAuth.integrateName1}}</div>
        </div>
      </div>
    </div>
    <div class="c-flex-row c-aligni-start" v-if="hasGiftRelates">
      <div class="c-fc-xblack c-fs24 c-fw-b c-ww88 c-pt30">赠品</div>
      <div class="c-w0 c-flex-grow1 c-bd-b1-f5">
        <div class="c-flex-row c-aligni-center c-pv30" @click="popGiftModal">
          <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br16 c-textAlign-c c-fs20 c-hh28 c-ww56 c-lh c-flex-row c-flex-center c-mr20">礼包</div>
          <div class="c-fs24 c-fc-xblack">内含{{giftRelatesCount}}个商品</div>
          <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end">
            <span class="iconfont c-fs20 c-fc-gray">&#xe60e;</span>
          </div>
        </div>
      </div>
    </div>
    <div class="c-flex-row c-aligni-start" v-if="hasRelatesDatum">
      <div class="c-fc-xblack c-fs24 c-fw-b c-ww88 c-pt30">课件</div>
      <div class="c-w0 c-flex-grow1 c-bd-b1-f5">
        <div class="c-flex-row c-aligni-center c-pv30" @click="popRelatesDatum">
          <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br16 c-textAlign-c c-fs20 c-hh28 c-ww56 c-lh c-flex-row c-flex-center c-mr20">资料</div>
          <div class="c-fs24 c-fc-xblack">课程资料下载</div>
          <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end">
            <span class="iconfont c-fs20 c-fc-gray">&#xe60e;</span>
          </div>
        </div>
      </div>
    </div>
    <div class="c-flex-row c-aligni-start" v-if="hasCollocation">
      <div class="c-fc-xblack c-fs24 c-fw-b c-ww88 c-pt30">配套</div>
      <div class="c-w0 c-flex-grow1 c-bd-b1-f5">
        <div class="c-flex-row c-aligni-center c-pv30" @click="popRelateCourse">
          <!-- <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ww48 c-lh c-flex-row c-flex-center c-mr20">搭配</div> -->
          <div class="c-fs24 c-fc-xblack"><span class="iconfont c-mr8 c-fs20">&#xe778;</span>该课程有搭配学习内容</div>
          <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end">
            <span class="iconfont c-fs20 c-fc-gray">&#xe60e;</span>
          </div>
        </div>
      </div>
    </div>
    <div class="c-flex-row c-aligni-start" v-if="hasCircle">
      <div class="c-fc-xblack c-fs24 c-fw-b c-ww88 c-pt30">圈子</div>
      <div class="c-w0 c-flex-grow1 c-bd-b1-f5">
        <div class="c-flex-row c-aligni-center c-pv30" @click="joinCircle">
          <!-- <div :class="theme == 'mb7_black' ? 'c-bg-g c-fc-g' : 'theme-bg-10 theme-fc'" class="c-br4 c-textAlign-c c-fs16 c-hh24 c-ww48 c-lh c-flex-row c-flex-center c-mr20">交流</div> -->
          <div class="c-fs24 c-fc-xblack"><span class="iconfont c-mr8 c-fs22">&#xe6a1;</span>立即加入参与讨论</div>
          <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end">
            <span class="c-fs24" :class="theme == 'mb7_black' ? 'c-fc-g' : 'theme-fc'">进入圈子</span>
          </div>
        </div>
      </div>
    </div>
    <div class="c-flex-row c-aligni-start" v-if="recommendProdInfo">
      <div class="c-fc-xblack c-fs24 c-fw-b c-ww88 c-pt30">推荐</div>
      <div class="c-w0 c-flex-grow1 c-bd-b1-f5">
        <div
          @click="goCenterProduct(recommendProdInfo)"
          class="c-pv30 c-flex-row"
        >
          <div class="c-ww180 c-hh120 c-br10 c-text-hidden c-p">
            <vip-custom-img
              :cover="recommendProdInfo.vipInfo.cover"
              :imgClass="'c-w100 c-br10'"
              :hasText="false"
              v-if="(recommendProdInfo.prodType == cfrom.vip || recommendProdInfo.prodType == cfrom.svip) && recommendProdInfo.vipInfo && recommendProdInfo.vipInfo.cover"
            />
            <img
              v-else
              class="c-w100 c-br10"
              :src="$addXossFilter(recommendProdInfo.prodType == cfrom.datum ? (recommendProdInfo.avatar ? recommendProdInfo.avatar : require('@/assets/i/wap/datum/icon_com.png')) : (recommendProdInfo.prodType == cfrom.vip ? require('@/assets/i/wap/course/vip.png') : (recommendProdInfo.prodType == cfrom.svip ? require('@/assets/i/wap/course/svip.png') : (recommendProdInfo.avatar || require('@/assets/defult270.png')))))"
              alt=""
            >
            <div class="c-fc-white c-pa c-p-t0 c-p-l0 c-fs20 c-ph10 hot-gradient-bg c-hh32 c-lh34 radius-hot"><span class="iconfont c-fs22 c-mr4">&#xe7bc;</span>人气推荐</div>
          </div>
          <div class="c-w0 c-flex-grow1 c-pl20 c-flex-column c-justify-sb">
            <div class="c-fs24 c-fc-xblack c-text-ellipsis2">{{recommendProdInfo.name}}</div>
            <template v-if="recommendProdInfo.prodType == cfrom.circle">
              <div class="c-flex-row c-justify-sb c-aligni-center">
                <div class="c-fs22 c-fc-gray">
                  <span class="theme-fc">{{recommendProdInfo.memberCount}}</span>人已加入
                </div>
                <div class="c-ww144 c-hh48 c-br24 theme-bg c-flex-row c-flex-center c-fc-white c-fs22">立即加入</div>
              </div>
            </template>
            <template v-else>
              <div
                v-if="recommendProdInfo.isSaleOnly == 0 && recommendProdInfo.isSaleTogether == 1"
                class="c-fs22 c-fc-xmlred c-fw-b"
              >关联售卖</div>
              <div
                v-else
                class="c-fs22 c-fc-xmlred c-fw-b"
              >
                <span v-if="recommendProdInfo.payType == 2 || (recommendProdInfo.prodType == cfrom.camp && recommendProdInfo.payType == 0)">{{'￥' | iosPriceFilter(recommendProdInfo.optimal)}}</span>
                {{recommendProdInfo.payType | priceValueFilter(recommendProdInfo.prodPrice, recommendProdInfo.prodType, recommendProdInfo.optimal)}}
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="c-flex-row c-aligni-start" v-if="collocationList && collocationList.length > 0">
      <div class="c-fc-xblack c-fs24 c-fw-b c-ww88 c-pt30">搭配购</div>
      <div class="c-w0 c-flex-grow1 c-bd-b1-f5">
        <div class="c-contexty-hidden c-contextX-scroll c-ws-n">
          <div @click="goDetail(item.pcId)" v-for="(item, index) in collocationList" :key="index" class="c-inlineblack c-vcAlign-top c-pv30">
            <div class="c-flex-row c-justify-sb c-ww480">
              <div class="c-ww180 c-hh120 c-br10 c-text-hidden c-p">
                <div class="c-br10 c-text-hidden c-p c-maxh120">
                  <img class="c-w100 c-br10 c-text-hidden" :src="$addXossFilter(item.cover ,require('@/assets/defult270.png'))" alt="">
                  <div class="c-fc-white c-fs18 c-translucent-balck50 c-br-tl16 c-pa c-p-b0 c-p-r0 c-ph12 c-hh28 c-lh28">{{item.comboType === 1 ? '自选套餐' : '固定套餐'}}</div>
                </div>
              </div>
              <div class="c-flex-column c-justify-sb c-w0 c-flex-grow1 c-ml20">
                <div class="c-fs24 c-fc-xblack c-text-ellipsis1">{{item.name}}</div>
                <div class="c-fs20 c-fc-sblack">
                  <cj-clocker :time="timeFn(index)" @on-finish="finishFn(index)">
                    <template v-slot="{ timeInfo }">
                      距{{item.pcStatus == 2 ? '结束' : '开始'}}：<span class="c-fc-xblack c-fw-b">{{timeInfo.D}}</span>天
                      <span class="c-ml4">
                        <span class="c-fs20 c-fc-xblack c-ww32 c-hh24 c-br4 c-inlineblack time-bg c-textAlign-c c-fw-b">{{timeInfo.H}}</span>
                        <span class="c-ph2">:</span>
                        <span class="c-fs20 c-fc-xblack c-ww32 c-hh24 c-br4 c-inlineblack time-bg c-textAlign-c c-fw-b">{{timeInfo.M}}</span>
                        <span class="c-ph2">:</span>
                        <span class="c-fs20 c-fc-xblack c-ww32 c-hh24 c-br4 c-inlineblack time-bg c-textAlign-c c-fw-b">{{timeInfo.S}}</span>
                      </span>
                    </template>
                  </cj-clocker>
                </div>
                <div class="c-fs22 c-fc-xmlred c-fw-b"><span class="c-fs22">{{'￥' | iosPriceFilter}}</span>{{(item.comboType == 2 && item.specType == 2 ? item.minPrice : item.price) | moneyStr}}<span v-if="item.comboType == 2 && item.specType == 2" class="c-fs18">起</span></div>
                <div class="c-flex-row" v-if="Number(item.collocationPrice - item.price) > 0 && !$isWxAppIos()">
                  <div class="c-inlineblack c-vcAlign-middle c-text-ellipsis1  c-fc-xmlred c-p c-text-hidden c-br4 bd1-xmlred c-pv2 c-lh c-pl32 c-boxsizing-c c-pr5">
                    <div class="iconfont c-fs28 c-pa p-l-2 c-p-t0">&#xe758;</div>
                    <div class="c-fs18 c-text-ellipsis1">{{item.comboType == 1 ? '最多可省' : item.specType == 2 ? '最多可省' : '立省'}}<span>{{'￥' | iosPriceFilter}}</span>{{Number(item.collocationPrice - item.price).toFixed(2) | moneyStr}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-inlineblack c-vcAlign-top c-hh180 c-ww12 bg-more"></div>
          <div @click="goMore" class="c-fs18 c-fc-gray c-inlineblack c-vcAlign-top c-hh180 c-ww20 c-ml20 c-ws-pw c-pt48">查看更多</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js"
import VipEntry from "@/components/templates/common/vipEntry.vue";
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
export default {
  name: 'discountTip',
  components: {VipEntry, VipCustomImg},
  props: {
    turnName: {
      type: String,
      default: ''
    },
    vipDiscount: {
      type: Number,
      default: 100
    },
    svipDiscount: {
      type: Number,
      default: 100
    },
    hasPermission: {
      type: Boolean,
      default: true,
    },
    isShowCoupon: {
      type: Boolean,
      default: true,
    },
    isFriendHelper: {
      type: Boolean,
      default: false,
    },
    showTurn: {
      type: Boolean,
      default: false,
    },
    showDiscount: {
      type: Boolean,
      default: false,
    },
    /*资料优惠券判断条件*/
    couponPermission: {
      type: Boolean,
      default: true,
    },
    sales: {
      type: Object,
      default: null,
    },
    collage: {
      type: Object,
      default: null,
    },
    deductiblePoints: {
      type: Number,
      default: 0,
    },
    distributionId: {
      type: Number,
      default: 0,
    },
    isSaleOnly: {
      type: Number,
      default: 1,
    },
    couponList: {
      type: Array,
      default: () => []
    },
    ios: {
      type: Boolean,
      default: false,
    },
     /*是否来源面授课*/
    eduflag: {
      type: Boolean,
      default: false,
    },
    //是否参与营销
    isMarketing: {
      type: Boolean,
      default: false,
    },
    ckFrom: {
      type: Number,
      default: -1,
    },
    cashBack: {
      type: Array,
      default: () => [],
    },
    isNew: {
      type: Boolean,
      default: false,
    },
    originPrice: {
      type: Number,
      default: 0
    },
    hasCollocation: {
      type: Boolean,
      default: false,
    },
    showIntegrate: {
      type: Boolean,
      default: false,
    },
    isShowStyle: {
      type: Boolean,
      default: true
    },
    circleStyle: {
      type: Boolean,
      default: false
    },
    vipDiscountType: {
      type: Number,
      default: 1,
    },
    vipDiscountPrice: {
      type: Number,
      default: 0,
    },
    svipDiscountPrice: {
      type: Number,
      default: 0,
    },
    ckFromText: {
      type: String,
      default: '本课程免费学习'
    },
    hasCircle: {
      type: Boolean,
      default: false,
    },
    relData: {
      type: Array,
      default: () => [],
    },
    hasGiftRelates: {
      type: Boolean,
      default: false,
    },
    giftRelatesCount: {
      type: Number,
      default: 0,
    },
    hasRelatesDatum: {
      type: Boolean,
      default: false,
    },
    styleType: {
      type: Number,
      default: 1,
    },
    recommendProdInfo: {
      type: Object,
      default: null,
    },
    relateCollocationArr: {
      type: Array,
      default: () => []
    },
    isChain: {
      type: Boolean,
      default: false
    },
    chainOrderBonus: {
      type: Number,
      default: 0
    },
    reOrderBonus: {
      type: Number,
      default: 0
    },
    chainIdName: {
      type: String,
      default: ""
    },
    mixMarketing: { // 处于营销活动(拼团、限时折扣、好友助力、砍价)中
      type: Boolean,
      default: false
    },
    isRecommend: { // 好友推荐
      type: Boolean,
      default: false
    },
    chainInfo: {
      type: Object,
      default: null
    },
    dataInfo: {
      type: Object,
      default: null
    },
    prodInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"),
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      isiOS: false,
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")) ? localStorage.getItem("vipType" + localStorage.getItem("userId")) : 1,
      vipFitstItem: localStorage.getItem("vipArr1") ? JSON.parse(localStorage.getItem("vipArr1")) : null,
      svipFitstItem: localStorage.getItem("svipArr1") ? JSON.parse(localStorage.getItem("svipArr1")) : null,
      list: [],
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      cfrom: global.ckFrom,
      collocationList: [],
      discountPrice: 0,
      chainPrice: 0
    }
  },
  watch: {
    dataInfo: {
      handler(newVal) {
        const dataInfo = JSON.parse(JSON.stringify(newVal));
        const vipType = this.vipType;
        if (dataInfo) {
          this.vipDiscount = Number(dataInfo.vipDiscount);
          this.svipDiscount = Number(dataInfo.svipDiscount);
          this.vipDiscountPrice = Number(dataInfo.vipDiscountPrice);
          this.svipDiscountPrice = Number(dataInfo.svipDiscountPrice);
          this.originPrice = Number(dataInfo.price);
          this.deductiblePoints = Number(dataInfo.deductiblePoints);
          this.vipDiscountType = (vipType == 3 || vipType > 4) && dataInfo.commonProdInfo && dataInfo.commonProdInfo.agentDiscount < 100
          ? 1 : (dataInfo.vipDiscountType ? Number(dataInfo.vipDiscountType) : 1);
          let custNameMap = utilJs.getCustNameMap();
          const agentDiscount = dataInfo.commonProdInfo && dataInfo.commonProdInfo.agentDiscount < 100 ? dataInfo.commonProdInfo.agentDiscount : 100;
          const svipDiscount = dataInfo.svipDiscount < 100 ? dataInfo.svipDiscount : 100;
          const vipDiscount = dataInfo.vipDiscount < 100 ? dataInfo.vipDiscount : 100;
          if (dataInfo.optimal && (!this.isMarketing || (!this.isInMarketTwoPrice && this.isMarketing))) {
            // optimalPriceType：1 产品本身价格 2 vip价格 3 svip价格 4 服务商 101 限时购 102 拼团 112 砍价  10 链动会员 20 链动代理商 99 链动复购
            const optimal = dataInfo.optimal;
            this.idName = optimal.optimalPriceType == 2 ? 'VIP' : optimal.optimalPriceType == 3 ? 'SVIP' : optimal.optimalPriceType == 4 ? custNameMap[vipType] : '';
            this.idPrice = optimal.optimalPrice;
            this.idDiscount = optimal.optimalPriceType == 2 ? vipDiscount : optimal.optimalPriceType == 3 ? svipDiscount : optimal.optimalPriceType == 4 ? agentDiscount : 100;
          } else {
            custNameMap[1] = 'VIP';
            this.idName = custNameMap[vipType];
            this.idPrice = dataInfo.vipDiscountType == 2 ? (
                (vipType == 4 && Number(dataInfo.svipDiscountPrice) < Number(dataInfo.price))
                  ? Number(dataInfo.svipDiscountPrice)
                  :
                (vipType == 2 && Number(dataInfo.vipDiscountPrice) < Number(dataInfo.price))
                  ? Number(dataInfo.vipDiscountPrice)
                  : Number(dataInfo.price)
              ) : Number(dataInfo.price);
            this.idDiscount = (vipType == 3 || vipType > 4) && agentDiscount < 100 ? agentDiscount :
                    vipType == 4 && svipDiscount < 100 ? svipDiscount :
                    ((((vipType == 1 || vipType == 2) && !dataInfo.optimal) || (vipType == 2 && dataInfo.optimal)) && vipDiscount < 100) ? vipDiscount : 100;
          }
          this.discountPrice = this.vipDiscountType == 1 ? Number(this.dataInfo.price * this.idDiscount / 100) : this.idPrice;
          this.chainPrice = this.chainInfo && this.chainInfo.isChainProd ?
                            (this.chainInfo.enableReorderDiscount == 1 && this.chainInfo.isReorder ? this.chainInfo.reorderBonus : this.chainInfo.enableOrderDiscount == 1 ? this.chainInfo.orderBonus : this.dataInfo.price) :
                            this.dataInfo.price;
        }
      },
      immediate: true,
    },
    chainInfo: {
      handler(newVal) {
        const chainInfo = JSON.parse(JSON.stringify(newVal));
        if (chainInfo) {
          this.isChain = chainInfo.isChainProd;
          this.chainOrderBonus = chainInfo.enableOrderDiscount == 1 ? chainInfo.orderBonus : 0;
          this.reOrderBonus = chainInfo.enableReorderDiscount == 1 && chainInfo.isReorder == 1 ? chainInfo.reorderBonus : 0;
          this.chainIdName = chainInfo.enableReorderDiscount == 1 && chainInfo.isReorder ?
                  '复购价' : chainInfo.userType == 1 ? '普通用户' : chainInfo.userType2Name[chainInfo.userType];
        }
      },
      immediate: true,
    },
    couponList: {
      handler(newList, oldList) {
        if (newList) {
          this.list = newList.slice(0, 2);
        }
      },
      immediate: true,
    },
    relateCollocationArr: {
      handler(newList, oldList) {
        if (newList) {
          this.collocationList = newList ? newList.slice(0, 3) : [];
        }
      },
      immediate: true,
    }
  },
  computed: {
    // 营销活动中存在两种最低价格（最低价格不是营销价格）
    isInMarketTwoPrice() {
      return this.optimal && !((this.dataInfo.sales && this.optimal.optimalPriceType != 101) || (this.dataInfo.bargain && ((this.dataInfo.bargain.status == 1 &&
            this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) || (this.dataInfo.collage && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) || (this.dataInfo.isFriendHelper)) ? false : true
    },
    optimal() {
      return this.dataInfo ? this.dataInfo.optimal : null;
    },
    // 折扣判断显示条件
    showDiscountInfo() {
      let showDisPrice = [2, 3, 4].includes(this.optimal.optimalPriceType) && !this.isMarketing;
      if (this.isInMarketTwoPrice) {
        showDisPrice = (this.chainInfo && this.chainInfo.isChainProd) ? this.discountPrice * 1 < this.chainPrice * 1 : this.discountPrice * 1 < this.dataInfo.price * 1;
      }
      return !this.$isWxAppIos() && showDisPrice;
    },
    // 优惠券判断显示条件
    showCoupon() {
        return this.list && this.list.length > 0 && !this.isRecommend
    },
    // 积分判断显示条件
    showPoints() {
        return this.companyAuth.enablePoints == 1 && this.deductiblePoints > 0 && !this.isMarketing && !this.isRecommend
    },
    // 链动判断显示条件
    showChain() {
      let showChainPrice = [10, 20, 99].includes(this.optimal.optimalPriceType) && !this.isMarketing;
      if (this.isInMarketTwoPrice) {
        showChainPrice = (this.chainInfo && this.chainInfo.isChainProd) ? this.chainPrice * 1 <= this.discountPrice * 1 : this.chainPrice * 1 <= this.dataInfo.price * 1;
      }
      return !this.$isWxAppIos() && showChainPrice && this.chainIdName && ((this.chainOrderBonus > 0 && this.chainOrderBonus < Number(this.originPrice)) || (this.reOrderBonus > 0 && this.reOrderBonus < Number(this.originPrice)))
    },
    showCashBack() {
      return this.cashBack && this.cashBack.length > 0;
    },
    showRelData() {
      return this.relData && this.relData.length > 0;
    },
    // 关联售卖文案
    relDataNumText() {
      let relNum = [];
      this.relData.forEach(item => {
        if ([110, 111, 112].includes(item.prodType) || (item.prodType == global.ckFrom.vip || item.prodType == global.ckFrom.svip)) {
          let pType = [110, 111, 112].includes(item.prodType) ? 5 : 1; // 视频音频图文 统一5 会员类型统一1
          if (relNum.filter(it => it.prodType == pType) && relNum.filter(it => it.prodType == pType).length == 0) {
            relNum.push({prodType: pType, num: 1})
          } else {
            let i = relNum.findIndex(it => it.prodType == pType);
            relNum[i].num++
          }
        } else if (relNum.filter(it => it.prodType == item.prodType) && relNum.filter(it => it.prodType == item.prodType).length > 0) {
          let i = relNum.findIndex(it => item.prodType == it.prodType);
          relNum[i].num++
        } else {
          relNum.push({prodType: item.prodType, num: 1})
        }
      })
      let txt = '';
      relNum.forEach((item, index) => {
        let typeTxt = (item.prodType == global.ckFrom.vip || item.prodType == global.ckFrom.svip) ? '会员' : global.prodMapType[item.prodType];
        txt = `${txt}${item.num}个${typeTxt}${index == relNum.length - 1 ? '' : '/'}`
      })
      return txt
    },
    // 满减活动满减信息
    getCashBackTxt() {
      let txt = '';
      this.cashBack.forEach((item, index) => {
        if (item.isDiscount == 1) {
          txt = txt + item.detail.title + item.detail.amount + (index == (this.cashBack.length - 1) ? '' : '；');
        }
      })
      return txt;
    },
    // 显示"、送x张无门槛券、x张折扣券、送x积分"
    getCashBackPresent() {
      return function(discountInfo) {
        let sendDiscount = '';
        let sendPoints = '';
        if (discountInfo.isSendDiscount == 1) {
          sendDiscount = `${discountInfo.isSendProd == 1 ? '、' : ''}送`
          discountInfo.sendDiscountList .forEach((item, index) => {
              sendDiscount = `${sendDiscount}${item.number}张${item.redeemCodeType == 1 ? '兑换码' : (item.redeemCodeType == 2 ? '代金券' : (item.redeemCodeType == 3 ? '满减券' : (item.redeemCodeType == 4 ? '抵价券' : '折扣券')))}${index == (discountInfo.sendDiscountList.length - 1) ? '' : '、'}`
          })
        }
        if (discountInfo.isSendPoints == 1) {
          sendPoints = `${discountInfo.isSendDiscount == 1 || discountInfo.isSendProd == 1 ? '、' : ''}送${discountInfo.points}${this.customPointName}`;
        }
        return sendDiscount + sendPoints;
      }
    },
    // 满减活动包邮信息
    getFreeShipping() {
      let txt = '';
      let list = this.cashBack.filter(item => {return item.isFreeShipping == 1});
      list.forEach((item, index) => {
        txt = txt + item.detail.title + item.detail.ship + (index == (list.length - 1) ? '' : '；')
      })
      return txt;
    },
    //不是ios && 是否显示优惠信息 &&vip折扣信息&&积分抵扣信息&&优惠券信息
    showDiscountFlag() {
      if (!this.optimal) {
        let showDiscountflag = !this.hasPermission && !this.isMarketing && !(!this.couponPermission || this.couponList.length == 0) && !this.isiOS && this.showDiscount && !this.distributionId &&
        ((this.companyAuth.enablePoints == 1 && this.deductiblePoints > 0) ||
        (((this.vipDiscountType == 2 && ((this.vipDiscountPrice < this.originPrice && this.vipDiscountPrice != 0) || (this.svipDiscountPrice < this.originPrice && this.svipDiscountPrice != 0))) ||
          (this.vipDiscountType == 1 && ((this.vipDiscount != 100 && this.vipDiscount != 0) || (this.svipDiscount != 100 && this.svipDiscount != 0)))) &&
          this.cashBack && this.cashBack.length == 0 && !this.isChain
        ) ||
        (!this.distributionId && this.couponList && this.couponList.length > 0) ||
        (this.isChain && this.chainIdName && ((this.chainOrderBonus > 0 && this.chainOrderBonus < Number(this.originPrice)) || (this.reorderBonus > 0 && this.reorderBonus < Number(this.originPrice)))))
        return showDiscountflag
      } else {
        return !this.hasPermission && !this.isiOS && !this.distributionId && (this.showDiscountInfo || this.showCoupon || this.showChain || this.showPoints);
      }
    },
    // !(ios|| vip sivp折扣信息)
    showVipEnter() {
      let noShow = false;
      if (!this.optimal) {
        noShow = this.isChain || (this.isMarketing || this.sales || this.collage) || this.hasPermission || this.isiOS ||
          (this.vipDiscount == 0 && !this.vipFitstItem && this.vipType >= 2) ||
          (this.svipDiscount == 0 && !this.svipFitstItem && this.vipType >= 4 && this.companyAuth.enableSvipModule == 1 && this.companyAuth.enableSvipSpec)
          console.log(noShow);
      } else {
        noShow = this.hasPermission || this.isMarketing || this.isRecommend || (this.vipDiscount == 0 && !this.vipFitstItem && this.vipType >= 2) || (this.svipDiscount == 0 && !this.svipFitstItem && this.vipType >= 4)
      }
      return !this.$isWxAppIos() && !noShow
    },
  },
  created() {

  },
  mounted() {
    this.isiOS = navigator.userAgent.indexOf("IOSLogin") > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1;
    this.$nextTick(() => {
      if (this.dataInfo) {
        this.discountPrice = this.vipDiscountType == 1 ? Number(this.dataInfo.price * this.idDiscount / 100) : this.idPrice;
        this.chainPrice = this.chainInfo && this.chainInfo.isChainProd ?
                          (this.chainInfo.enableReorderDiscount == 1 && this.chainInfo.isReorder ? this.chainInfo.reorderBonus : this.chainInfo.enableOrderDiscount == 1 ? this.chainInfo.orderBonus : this.dataInfo.price) :
                          this.dataInfo.price;
      }
    })
  },
  methods: {
    showCouponText(cItem) {
      let couponText = '';
      if (cItem.type == 1) {
        couponText = cItem.price * 1 + '元无门槛'
      }
      if (cItem.type == 3) {
        if (cItem.subType == 1) {
          couponText = cItem.price * 1 + '元无门槛'
        } else if (cItem.subType == 2) {
          couponText = ('满' + cItem.amount + '减' + cItem.price * 1)
        }
      }
      if (cItem.type == 5) {
        if (cItem.subType == 1) {
          couponText = cItem.price * 1 + '折无门槛'
        } else if (cItem.subType == 2) {
          couponText = ('满' + cItem.amount + '打' + cItem.price * 1 + '折')
        }
      }
      return couponText;
    },
    goMore() {
      this.$routerGo(this, "push", {
        path: "/homePage/collocationBuy/collocationBuyList",
        query: {
          prodId: this.prodInfo.prodId,
          prodType: this.prodInfo.prodType,
        }
      });
    },
    goDetail(mId) {
      this.$routerGo(this, "push", {
        path: "/homePage/collocationBuy/collocationDetail",
        query: {mId: mId}
      });
    },
    timeFn: function (index) {
      let stime = this.collocationList[index].startTime ? utilJs.getTimeByDate(this.collocationList[index].startTime) : 0;
      let etime = this.collocationList[index].endTime ? utilJs.getTimeByDate(this.collocationList[index].endTime) : 0;
      let nowTime = (new Date()).getTime();
      //.status 1未开始,2进行中,-1已结束
      let time = '';
      if (stime > nowTime) {
        this.collocationList[index].pcStatus = 1;
        time = stime;
      } else if (etime > nowTime) {
        this.collocationList[index].pcStatus = 2;
        time = etime;
      } else {
        this.collocationList[index].pcStatus = 3;
      }
      return time;
    },
    finishFn: function (index) {
      if (this.collocationList[index].pcStatus == 1) {
        this.collocationList[index].pcStatus = 2;
      } else {
        this.collocationList[index].pcStatus = 3;
      }
    },
    goCenterProduct(tItem) {
      this.$emit('goCenterProduct', tItem)
    },
    popRelateCourse() {
      this.$emit('popRelate');
    },
    joinCircle() {
      this.$emit('joinCircle');
    },
    popGiftModal() {
      this.$emit('popGiftModal');
    },
    popRelatesDatum() {
      this.$emit('popRelatesDatum');
    },
    // 跳转到商品详情
    goShopDetail(shopNo) {
      this.$routerGo(this, "push", {
        path: "/mall/shopDetail/shopDetail",
        query: { shopNo: shopNo }
      });
    },
    clickCashBack() {
      this.$emit('clickCashBack');
    },
    clickShowCoupon() {
      this.$emit('clickShowCoupon');
    },
    goTOturn() {
      this.$emit('goTOturn');
    },
    getIntegration() {
      this.$emit('getIntegration')
    },
    clickShowRelData() {
      this.$emit('clickShowRelData')
    }
  }
}
</script>
<style scoped>
.borderL:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.1rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  background: var(--rgbcolor);
  content: "";
}
.left-bg {
  width: 0.74rem;
  height: 0.75rem;
  background: linear-gradient(90deg,#ff300c, rgba(255,48,12,0.7));
  border-radius: 0.15rem 0px 0.5rem 0.15rem;
  color: #fe7878;
}
.coupon-item {
  position: relative;
  border:none;
  /* border:1px solid #ff300c; */
  color: #FF300C;
}
.coupon-item:after{
  border-radius: 0.25rem;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #ff300c;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}
.c-maxw428 {
  max-width: 10.7rem;
}
.c-itbg{
  background: rgba(254,153,1,0.1);
}
.c-itfc {
  color: #fe9901;
}
.c-it-bd1 {
  border: 1px solid #FF300C;
}
.pr-8 {
  right: -0.2rem;
}
.pl-8 {
  left: -0.2rem;
}
.c-lh38 {
  line-height: 0.95rem;
}
.c-fc-g {
  color: #FE7901;
}
.c-bd1-g {
  border: 1px solid #FE7901;
}
.c-bg-g {
  background: rgba(254,121,1,0.1);
}
.hot-gradient-bg {
  background: linear-gradient(90deg,#ff3612, #ffbb4e);
}
.hot-price-fc {
  color: #FE9901;
}
.radius-hot {
  border-radius: 0.25rem 0px 0.4rem 0px;
}
.time-bg {
  background: rgba(51, 51, 51, 0.1);
  line-height: 0.65rem;
}
.bd1-xmlred {
  border: 1px solid #FF300C;
}
.p-l-2 {
  left: -0.05rem;
}
.bg-more {
  transform: scaleX(-1);
  background-image: linear-gradient(270deg, #ffffff00 0%, #F7F7F7 100%);
}
</style>